<template>
  <view v-if="md.done" class="yt-dateTimePicker">
    <view
        :class="{ show: md.open }"
        :style="{ backgroundColor: maskBgColor }"
        class="mask"
        @touchmove.stop.prevent
    >
    </view>

    <view :class="{ show: md.open }" class="wrap">
      <view class="picker-header" @touchmove.stop.prevent>
        <view class="cancel" @click="md.open = false">×</view>
        <text>{{ title }}</text>
        <view class="submit" @click="_onSubmit()">确定</view>
      </view>

      <view v-if="isShowCalendar" class="calendar">
        <view
            :class="md.calendar == 'lunar' ? 'active' : ''"
            @click="md.calendar = 'lunar'"
        >
          阴历
        </view>
        <view
            :class="md.calendar == 'solar' ? 'active' : ''"
            @click="md.calendar = 'solar'"
        >
          阳历
        </view>

      </view>

      <view class="picker-body">
        <picker-view
            :value="md.value"
            indicator-class="select-line"
            @change="_onChange"
        >
          <picker-view-column v-if="timeHide[0]">
            <view
                v-for="(item, index) in md.years"
                :key="item"
                :class="md.value[0] == index ? 'select-item column-item' : 'column-item'"
            >
              {{ item + timeLabel[0] }}
            </view>
          </picker-view-column>
          <picker-view-column v-if="timeHide[1]">
            <view
                v-for="(item, index) in md.months"
                :key="item"
                :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + timeLabel[1] }}
            </view>
          </picker-view-column>
          <picker-view-column v-if="timeHide[2]">
            <view
                v-for="(item, index) in md.days"
                :key="item"
                :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + timeLabel[2] }}
            </view>
          </picker-view-column>

          <picker-view-column v-if="timeHide[3]">
            <view
                v-for="(item, index) in md.hours"
                :key="item"
                :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + timeLabel[3] }}
            </view>
          </picker-view-column>

          <picker-view-column v-if="timeHide[4]">
            <view
                v-for="(item, index) in md.minutes"
                :key="item"
                :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + timeLabel[4] }}
            </view>
          </picker-view-column>

          <picker-view-column v-if="timeHide[5]">
            <view
                v-for="(item, index) in md.seconds"
                :key="item"
                :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + timeLabel[5] }}
            </view>
          </picker-view-column>
          <!-- Other columns -->
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "出生时间",
    },
    startYear: {
      type: Number,
      default: 1949,
    },
    endYear: {
      type: Number,
      default: 2049,
    },
    timeLabel: {
      type: Array,
      default: () => ["年", "月", "日", "时", "分", "秒"],
    },
    timeHide: {
      type: Array,
      default: () => [true, true, true, true, true, true],
    },
    timeInit: {
      type: Number,
      default: Date.now(),
    },
    isShowCalendar: {
      type: Boolean,
      default: true,
    },
    maskBgColor: {
      type: String,
      default: "rgba(49, 47, 47, 0.4)",
    },
    calendar: {
      type: String,
      default: 'lunar',
    },
    defaultValue: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      md: {
        open: false,
        years: [],
        months: [],
        days: [],
        hours: [],
        minutes: [],
        seconds: [],
        year: "",
        month: "",
        day: "",
        hour: "",
        minute: "",
        second: "",
        value: [0, 0, 0, 0, 0, 0],
        done: false,
        calendar: "solar",
      },
    };
  },
  mounted() {
    this.init();
    if (this.defaultValue) {
      const time = this.chooseTime(this.defaultValue)
      this.md.value = [
        time.year - this.startYear,
        time.month - 1,
        time.day - 1,
        time.hours,
        time.minute,
        time.second
      ]
    }
  },
  watch: {
    calendar(val) {
      this.md.calendar = val;
    }
  },
  methods: {
    chooseTime(time) {
      const now = new Date(time);
      const year = now.getFullYear();
      const month = Number(String(now.getMonth() + 1).padStart(2, '0')); // 月份从0开始，需要加1，并补0
      const day = Number(String(now.getDate()).padStart(2, '0')); // 补0
      const hours = Number(String(now.getHours()).padStart(2, '0')); // 补0
      const minute = Number(String(now.getMinutes()).padStart(2, '0'));
      const second = Number(String(now.getSeconds()).padStart(2, '0'));
      return {
        year,
        month,
        day,
        hours,
        minute,
        second,
      }
    },
    init() {
      // Initialization methods
      this.initYears();
      this.initMonths();
      this.initDays();
      this.initHours();
      this.initMinutes();
      this.initSeconds();
      this.setSelectValue();
      this.md.done = true;
    },
    initYears() {
      const years = [];
      for (let year = this.startYear; year <= this.endYear; year++) {
        years.push(year);
        if (new Date(this.timeInit).getFullYear() === year) {
          this.md.value[0] = year - this.startYear;
        }
      }
      this.md.years = years;
    },
    initMonths() {
      const months = [];
      for (let month = 1; month <= 12; month++) {
        months.push(month);
        if (new Date(this.timeInit).getMonth() + 1 === month) {
          this.md.value[1] = month - 1;
        }
      }
      this.md.months = months;

    },
    initDays() {
      const value = this.md.value;
      const selectedYear = this.md.years[value[0]];
      const selectedMonth = this.md.months[value[1]];
      const days = [];
      const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
      for (let day = 1; day <= totalDays; day++) {
        days.push(day);
        if (new Date(this.timeInit).getDate() === day) {
          this.md.value[2] = day - 1;
        }
      }
      this.md.days = days;

    },
    initHours() {
      const hours = [];
      for (let hour = 0; hour <= 23; hour++) {
        hours.push(hour);
        if (new Date(this.timeInit).getHours() === hour) {
          this.md.value[3] = hour;
        }
      }
      this.md.hours = hours;
    },
    initMinutes() {
      const minutes = [];
      for (let minute = 0; minute < 60; minute++) {
        minutes.push(minute);
        if (new Date(this.timeInit).getMinutes() === minute) {
          this.md.value[4] = minute;
        }
      }
      this.md.minutes = minutes;
    },
    initSeconds() {
      const seconds = [];
      for (let second = 0; second < 60; second++) {
        seconds.push(second);
        if (new Date(this.timeInit).getSeconds() === second) {
          this.md.value[5] = second;
        }
      }
      this.md.seconds = seconds;
    },
    show() {
      this.init();
      this.md.open = true;
    },
    hide() {
      this.md.open = false;
    },
    _onChange(e) {
      this.md.value = e.detail.value;
      this.setSelectValue();
    },
    setSelectValue() {
      // Set select value logic
      const v = this.md.value;

      this.md.year = this.md.years[v[0]];
      this.md.month = this.md.months[v[1]];
      this.md.day = this.md.days[v[2]];
      this.md.hour = this.md.hours[v[3]];
      this.md.minute = this.md.minutes[v[4]];
      this.md.second = this.md.seconds[v[5]];
      console.log(this.md)
    },
    _onSubmit() {
      const result = {
        year: this.timeHide[0] ? this.zeroPadding(this.md.year) : "",
        month: this.timeHide[1] ? this.zeroPadding(this.md.month) : "",
        day: this.timeHide[2] ? this.zeroPadding(this.md.day) : "",
        hour: this.timeHide[3] ? this.zeroPadding(this.md.hour) : "",
        minute: this.timeHide[4] ? this.zeroPadding(this.md.minute) : "",
        second: this.timeHide[5] ? this.zeroPadding(this.md.second) : "",
        calendar: this.md.calendar,
      };
      console.log(result)
      this.$emit("submit", result);
      this.hide();
    },
    zeroPadding(num) {
      return num && num.toString().padStart(2, "0") || ''
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./x-time-picker.scss";
</style>
